<template>
  <el-container class="wh-full" :data-refresh="learnCtSidebarRefresh">
    <asideMenu :menus="menu" @menu-select="menuSelect" :collapse="isCollapse" background-color="#001525" text-color="#fff">
      <template #logo  ><span v-text="book.bookName"></span></template>
    </asideMenu>
    <el-container class="v2-container">
      <el-header>
        <v2-header>
          <template #left>
            <span class="pointer pd-rl-10px col-409eff" @click="$router.push('/book')">返回上级</span>
          </template>
          <template #right>
            <span class="pointer pd-rl-10px col-409eff" @click="$router.push('/chapter')">章节管理</span>
          </template>
        </v2-header>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import v2Main from "components/v2-cps/v2-main";
import v2Header from "components/v2-cps/v2-header";
import sidebar from "./cps/sidebar";
import { mapGetters } from 'vuex'
import contentex from "api/learn/contentex";
import ApiResponse from "utils/ApiResponse";
import Constants from "@/Constants";
export default {
  name: "index" ,
  components:{  v2Main ,v2Header ,sidebar} ,
  data(){
    return {
      menu:[] ,
    }
  },
  created() {
  },
  mounted() {
    this.getMenu();
  },
  computed:{
    ...mapGetters(['isCollapse','book',"bookActiveId"]),
    learnCtSidebarRefresh(){
      this.getMenu()
      return this.$store.state.learn.learnCtSidebarRefresh
    },
  },
  methods: {
    collapse(){
      this.$store.commit("global/setCollapsed" , !this.isCollapse)
    },
    getMenu(){
      contentex.getList({
        bookId: this.book.id
      }).then(res=>{
        let response =  new ApiResponse(res) ;
        response.ok((data)=>{
          this.menu = data ;
        })
      })
    },
    menuSelect({path}){
      let [id , type] = path.split(":")
      if(type === "1"){
        this.$router.push("/section/"+id);
        this.$store.commit(Constants.setBookActiveId , id) ;
      }
    }

  }
}
</script>

<style scoped>
.el-menu-item.is-active{
  color: #fff !important;
  background-color: #409EFF !important;
}
.nav-title{
  height: 60px;line-height: 60px;text-align: center;
  font-size: 20px;
  color: #fff;
}
.el-header{
  padding:0;
}
.v2-container{
  width: calc(100vw - 220px);
}
</style>
